<template>
  <div class="detail-container">
    <div>
      <div class="title">
        网关明细
      </div>
      <div>
        <div class="content">
          <span>网关序列号:</span>
          <span>{{prodId}}</span>
        </div>
        <div class="content">
          <span>产品序列号:</span>
          <span>{{detailInfo.productSN}}</span>
        </div>
        <div class="content">
          <span>产品型号:</span>
          <span>{{detailInfo.productName}}</span>
        </div>
        <div class="content">
          <span>生产日期:</span>
          <span>{{detailInfo.pd}}</span>
        </div>
        <div class="content">
          <span>硬件名称:</span>
          <span>{{detailInfo.hardware}}</span>
        </div>
        <div class="content">
          <span>硬件版本号:</span>
          <span>{{detailInfo.hwVersion}}</span>
        </div>
        <div class="content">
          <span>软件名称:</span>
          <span>{{detailInfo.software}}</span>
        </div>
        <div class="content">
          <span>软件版本号:</span>
          <span>{{detailInfo.swVersion}}</span>
        </div>
        <div class="content">
          <span>网关状态:</span>
          <span :class="{'normal': detailInfo.boxStatus ==='Normal', 'abnormal':  detailInfo.boxStatus === 'Abnormal' }">{{ detailInfo.boxStatus ? detailInfo.boxStatus === 'Normal' ? '正常' : '故障' : '---' }}</span>
        </div>
        <div class="content">
          <span>运行时长:</span>
          <span>{{ dateToDay(detailInfo.deployedDate) }}</span>
        </div>
      </div>

    </div>

    <div class="info">
      <div class="title">4G信息</div>
      <div class="content">
        <span>ICCID:</span>
        <span>{{lteInfo.iccid}}</span>
      </div>
      <div class="content">
        <span>IMEI:</span>
        <span>{{lteInfo.imei}}</span>
      </div>
      <div class="content">
        <span>IMSI:</span>
        <span>{{lteInfo.imsi}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getLteInfo } from '../../../../boot/miot/details'

export default {
  name: 'gateway-detail',
  data () {
    return {
      lteInfo: {
        iccid: '',
        imei: '',
        imsi: ''
      }
    }
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    isOnline: {
      type: Boolean,
      default: false
    },
    detailInfo: {
      type: Object,
      default: () => ({
        wanType: '',
        productSN: '',
        productName: '',
        deviceSN: '',
        hwVersion: '',
        swVersion: '',
        software: '',
        hardware: '',
        lineStatus: '',
        pd: ''
      })
    }
  },
  watch: {
    boxId: {
      handler: function (val) {
        this.getLteInfo(val)
      },
      immediate: true
    }
  },
  computed: {
    prodId () {
      const boxId = this.detailInfo.boxId
      if (!boxId) return '---'
      try {
        const data = boxId.split('_')
        if (data.length === 1) return data[0]
        if (data.length === 2) return data[1]
      } catch (e) {
      }
      return '---'
    }
  },
  methods: {
    /**
     * 通过部署时间，计算运行时间
     * @param date
     */
    dateToDay (date) {
      if (!date) return '---'
      // 判断是不是合法的日期，如果不是直接返回
      if (/^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/.test(date)) return '---'
      // 计算部署时间距离现在时间差
      const timestamp = new Date().getTime() - new Date(date + ' 00:00:00').getTime()
      const second = timestamp / 1000
      const days = Math.floor(second / 86400)
      const hours = Math.floor((second % 86400) / 3600)
      const minutes = Math.floor(((second % 86400) % 3600) / 60)
      return `${days}天${hours}时${minutes}分`
    },

    async getLteInfo (boxId) {
      if (!boxId) return
      if (!this.isOnline) return
      const { data } = await getLteInfo(this.boxId)
      if (data) {
        this.lteInfo.iccid = data.iccid ? data.iccid : '--'
        this.lteInfo.imei = data.imei ? data.imei : '--'
        this.lteInfo.imsi = data.imsi ? data.imsi : '--'
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.detail-container
  padding 19px 0 22px 20px

  .info
    margin-top 15px

  .title
    line-height 1
    font-size 16px
    font-weight 500
    color $primary
    margin-bottom 16px

  .content
    color #333333
    line-height 1.86
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
  .normal
    color $positive
  .abnormal
    color $warning
</style>
